@charset "UTF-8";

/* 动画 */
.h1animation{
    animation: h1key 0.5s linear;
    /* Safari */
    -webkit-animation: h1key 0.5s linear;
    /* Firefox */
    -moz-animation: h1key 0.5s linear;
     /* IE 9 */
    -ms-zoom-animation: h1key 0.5s linear;
    /* Opera */
    -o-animation: h1key 0.5s linear;

    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}
/* save tha date 移动 */
.h2animation{
    animation: h2key 0.5s linear;

    /* Safari */
    -webkit-animation:h2key 0.5s linear;
    /* Firefox */
    -moz-animation: h2key 0.5s linear;
     /* IE 9 */
    -ms-zoom-animation: h2key 0.5s linear;
    /* Opera */
    -o-animation: h2key 0.5s linear;
}
/* 旋转 */
.h2rotateAn{
    animation: h2rotate 1s linear infinite alternate;

    /* Safari */
    -webkit-animation: h2rotate 1s linear infinite alternate;
    /* Firefox */
    -moz-animation: h2rotate 1s linear infinite alternate;
     /* IE 9 */
    -ms-zoom-animation: h2rotate 1s linear infinite alternate;
    /* Opera */
    -o-animation: h2rotate 1s linear infinite alternate;
}
.h3animation{
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;

    animation: h3key .5s linear;

    /* Safari */
    -webkit-animation: h3key .5s linear;
    /* Firefox */
    -moz-animation: h3key .5s linear;
     /* IE 9 */
    -ms-zoom-animation: h3key .5s linear;
    /* Opera */
    -o-animation: h3key .5s linear;
}
.h4animation{
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;

    -webkit-animation: h4key .5s linear;
    animation: h4key 1s linear;

    /* Safari */
    -webkit-animation: h4key .5s linear;
    /* Firefox */
    -moz-animation: h4key .5s linear;
     /* IE 9 */
    -ms-zoom-animation: h4key .5s linear;
    /* Opera */
    -o-animation: h4key .5s linear;
}
.h5animation{
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;

    animation: h5key 0.5s linear;

    /* Safari */
    -webkit-animation: h5key 0.5s linear;
    /* Firefox */
    -moz-animation: h5key 0.5s linear;
     /* IE 9 */
    -ms-zoom-animation: h5key 0.5s linear;
    /* Opera */
    -o-animation: h5key 0.5s linear;
}
.h6animcation{
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;

    animation: h6key .5s linear;

    /* Safari */
    -webkit-animation: h6key .5s linear ;
    /* Firefox */
    -moz-animation: h6key .5s linear;
     /* IE 9 */
    -ms-zoom-animation: h6key .5s linear;
    /* Opera */
    -o-animation: h6key .5s linear;
}
.dateanimation{
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;

    -webkit-animation: datekey .5s linear;
    animation: datekey 1s linear;

    /* Safari */
    -webkit-animation: datekey .5s linear;
    /* Firefox */
    -moz-animation: datekey .5s linear;
     /* IE 9 */
    -ms-zoom-animation: datekey .5s linear;
    /* Opera */
    -o-animation: datekey .5s linear;
}

/* h1 */
@keyframes h1key {
    from{
        opacity: 0;
        transform: translateY(-1000px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
        
    }
}
@-webkit-keyframes h1key {
    from{
        opacity: 0;
        -webkit-transform: translateY(-1000px);
    }
    to{
        opacity: 1;
        -webkit-transform: translateY(0);
        
    }
}

/* h2 */
@keyframes h2key {
    from{
        opacity: 0;
        transform: translateY(-1000px);
    }
    to{
        opacity: 1;
        /* margin-top: 3%; */
        transform: translateY(0px);
    }
}

@-webkit-keyframes h2key {
    from{
        opacity: 0;
        -webkit-transform: translateY(-1000px);
    }
    to{
        opacity: 1;
        /* margin-top: 3%; */
        -webkit-transform: translateY(0px);
    }
}

/* h2 - rotate */
@keyframes h2rotate {
    from{
        opacity: 1;
        transform: rotate(0deg);
        /* margin-top: 5%; */
    }
    to{
        opacity: 1;
        transform: rotate(-15deg);
        /* margin-top: 5%; */
    }
}
@-webkit-keyframes h2rotate {
    from{
        opacity: 1;
        -webkit-transform: rotate(0deg);
        /* margin-top: 5%; */
    }
    to{
        opacity: 1;
        -webkit-transform: rotate(-15deg);
        /* margin-top: 5%; */
    }
}

/* h3 */
@keyframes h3key {
    from{
        opacity: 0;
        transform: translateX(1000px);
        /* margin-top: 5%; */

    }
    to{
        opacity: 1;
        transform: translateX(0);
        /* margin-top: 5%; */
    }
}
@-webkit-keyframes h3key {
    from{
        opacity: 0;
        -webkit-transform: translateX(1000px);
        /* margin-top: 5%; */

    }
    to{
        opacity: 1;
        -webkit-transform: translateX(0);
        /* margin-top: 5%; */
    }
}

/* h4 */
@keyframes h4key {
    from{
        opacity: 0;
        transform: translateX(-1000px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@-webkit-keyframes h4key {
    from{
        opacity: 0;
        -webkit-transform: translateX(-1000px);
    }
    to{
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

/* h5 */
@keyframes h5key {
    from{
        opacity: 0;
        transform: translateY(1000px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);
        /* margin-top: -10px; */
    }
}
@-webkit-keyframes h5key {
    from{
        opacity: 0;
        -webkit-transform: translateY(1000px);
    }
    to{
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

/* h6 */
@keyframes h6key {
    from{
        opacity: 0;
        transform: scale(0);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}
@-webkit-keyframes h6key {
    from{
        opacity: 0;
        -webkit-transform: scale(0);
    }
    to{
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

/* date information */
@keyframes datekey {
    from{  
        opacity: 0;
        transform: scale(0);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes datekey {
    from{  
        opacity: 0;
        -webkit-transform: scale(0);
    }
    to{
        opacity: 1;
        -webkit-transform: scale(1);
    }
}